<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
</head>

<body>
    <jsp:include page="${APP_PATH}/common/head-home.jsp"/>

    <div class="row mt-2">
        <div class="d-none d-md-block d-lg-block d-xl-block col-md-3 col-lg-3 col-xl-3 mx-2">
            <div class="col-md-3 col-lg-3 col-xl-3" style="position:fixed">
                <c:choose>
                    <c:when test="${not empty user}">
                        <div class="mb-2 p-2 rounded shadow-sm bg-white">
                            <div class="border-dark border-bottom pb-1">
                                    <%--头像--%>
                                <div class="d-inline">
                                    <img class="rounded-circle" src="${user.headimgurl}" width="48px" height="48px"
                                         alt="用户头像">
                                </div>
                                <div class="d-inline">
                                    <strong class="ml-2" style="vertical-align: top;">${user.nickname}</strong><br/>
                                    <div style="clear: both"></div>
                                </div>
                                <span>ID:<a class="font-weight-light">${user.id}</a></span>
                            </div>
                            <div class="border-dark border-bottom">
                                <div class="d-flex">
                                    <div class="p-2 flex-fill pb-0">
                                        <dl class="text-center">
                                            <dt>关注</dt>
                                            <dd>${user.followingusernum}</dd>
                                        </dl>
                                    </div>
                                    <div class="p-2 flex-fill pb-0">
                                        <dl class="text-center">
                                            <dt>粉丝</dt>
                                            <dd>${user.fannum}</dd>
                                        </dl>
                                    </div>
                                    <div class="p-2 flex-fill pb-0">
                                        <dl class="text-center">
                                            <dt>经验</dt>
                                            <dd>${user.jiyan}</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="border-dark border-bottom">
                                <p>${user.slogan}</p>
                            </div>

                            <div class="my-1">
                                <div class="d-flex my-1">
                                    <div class="flex-fill text-center p-3 bg-dark"><a href="/recommend" class="text-white">博文&问题推荐</a></div>
                                    <div class="flex-fill text-center p-3 bg-danger"><a href="/search" class="text-white"><i class="fa fa-search"></i>搜索</a></div>
                                </div>
                            </div>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="mb-2 p-2 rounded shadow-sm bg-white">
                            <div class="border-dark border-bottom pb-1">
                                    <%--头像--%>
                                <div class="d-inline">
                                    <img class="rounded-circle" src="${APP_PATH}/images/logo.jpg" width="48px" height="48px"
                                         alt="用户头像">
                                </div>
                                <div class="d-inline">
                                    <strong class="ml-2" style="vertical-align: top;">游客访问</strong><br/>
                                    <span>请<a href="/login" class="text-danger">登录</a></span>
                                    <div style="clear: both"></div>
                                </div>
                            </div>
                        </div>
                    </c:otherwise>
                </c:choose>

                <div class="my-2 p-2 rounded shadow-sm bg-white">
                    <div class="border-bottom border-dark" style="position:relative;">
                        <a class="font-weight-bold"><i class="fa fa-football-ball"></i> 我的足迹</a>
                        <c:if test="${not empty userTracks}">
                            <a href="/userTrack" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                        </c:if>
                    </div>
                    <div>
                        <c:choose>
                            <c:when test="${empty userTracks}">
                                <%--为空时，提示用户--%>
                                <p>您还没有浏览任何文章或提问，快去学习吧！</p>
                            </c:when>
                            <c:otherwise>
                                <c:forEach items="${userTracks}" var="userTrack" end="5">
                                    <c:if test="${not empty userTrack.title}">
                                        <div class="my-1">
                                            <div class="text-left">
                                                <c:choose>
                                                    <c:when test="${userTrack.type==true}">
                                                        <p class="mb-0">文章：<a class="text-info" href="/blog/${userTrack.typeid}">${userTrack.title}</a></p>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <p class="mb-0">提问：<a class="text-info" href="/question/${userTrack.typeid}">${userTrack.title}</a></p>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                        </div>
                                    </c:if>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>

                    </div>
                </div>

                <div id="card-pagenav">

                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">

            <div>
                <div id="card-columns" class="card-columns">

                </div>


            </div>

            <div id="user" class="p-4" data-userId="${user.id}" data-nickname="${user.nickname}"></div>
        </div>

    </div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    //获取HTML中的图片地址
    function getimgsrc(htmlstr) {
        var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim;
        var imgsrcArr = [];
        while (tem = reg.exec(htmlstr)) {
            imgsrcArr.push(tem[2]);
        }
        return imgsrcArr;
    }

    //过滤html标签
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    //根据json解析构建blogs
    function buildPage_mainArea(result) {
        //清空card-columns
        var $card_columns=$("#card-columns");
        $card_columns.empty();
        $.each(result.extend.pageInfo.list,function (index,item) {
            if (item) {
                var div_card = $("<div class='card'></div>");
                //判断该博客中是否包含图片
                var imgsrc = getimgsrc(item.blogcontent);
                if (imgsrc.length>0) {
                    //alert(imgsrc[0]);
                    //图片存在，card中插入图片
                    div_card.append($("<img class='card-img-top' alt='博客封面' src='"+imgsrc[0]+"' data-holder-rendered='true'/>"));
                }
                var div_body = $("<div class='card-body'>");
                var h5 = $("<h5 class='card-title'><a href='/blog/"+item.id+"' class='text-dark'>" + item.blogtitle + "</a></h5>");
                //内容截取，并去掉HTML标签
                var content = item.blogcontent;
                content = delHtmlTag(content);
                content = content.substr(0, 200);
                var p = $("<p class='card-text'>"+content+"</p>");
                var p_small = $("<p class='card-text'><small class='text-muted'>"+new Date(item.edittime).toLocaleString()+"</small></p>");
                //开始封装
                div_card.append(div_body.append(h5).append(p).append(p_small)).appendTo($card_columns);
            }
        });
    }

    //构建页码
    function buildPage_pageNav(result) {
        var card_pagenav = $("#card-pagenav");
        card_pagenav.empty();

        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if(result.extend.pageInfo.pageNum === item){
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function(){
                toPage_blogs(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo(card_pagenav);
    }


    //获取指定页面博客内容
    function toPage_blogs(pn) {
        $.ajax({
            url:'/get/blogs/latest/'+pn,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    //响应成功
                    buildPage_mainArea(result);
                    buildPage_pageNav(result);
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    }

    $(function () {
        var userId=$("#user").attr("data-userId");
        var nickname=$("#user").attr("data-nickname");
        if (userId !== "" && nickname === "") {
            //用户登录，但是未完善信息
            toastr.info("请完善您的个人信息！");
            window.location.href = "/mine";
        }

        toPage_blogs(1);
    });
</script>

</body>

</html>
